import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    TextInput,
    TouchableOpacity, DeviceEventEmitter, Modal, Keyboard
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
import Styles from './Styles';
const { width, height } = Dimensions.get('window')

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import Utils from "../../utils/Utils";
import Football from "../../utils/Football";
import REQUEST from "../../../REQUEST";
import ScrollableTabView, { ScrollableTabBar } from "react-native-scrollable-tab-view";
import styles from "../News/styles";
import Recommend from "../News/Recommend";
var weekday = new Array(7);
weekday[0] = "星期天";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";

export default class FootballBetList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            refreshing: false,
            toastModelVisible: false,
            message: '',
            is_need_pictures: true,//是否需要上传图片
            opt_status: false,
            beishuInput: "10",//倍数            

            bet_count: 0,//数量
            bet_amount: 0,//投注金额
            bet_min_bonus: 0.00,//最少奖金
            bet_max_bonus: 0.00,//最大奖金

            betNumber: {},
            lists: [],
            name: [],
            danguanLists: [],
            duoguanLists: [],
            bet_type: 1,//1自由过关 2多串过关

            moreModalVisible: false,
            modelSelectItem: {},
            moreData: [],
            spf_title: ['胜', '平', '负'],
            rspf_title: ['让胜', '让平', '让负'],
            crs_title: ["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其他", "0:0", "1:1", "2:2", "3:3", "平其他", "0:1", "0:2", "0:3", "0:4", "0:5", "1:2", "1:3", "1:4", "1:5", "2:3", "2:4", "2:5", "负其他"],
            ttg_title: ['0', '1', '2', '3', '4', '5', '6', '7+'],
            hafu_title: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],

            isGold: 0,//0不是大神1是大神
            IsFollow: 0,
            Title: "",
            Commis: 0,
            IsShow: 0,
            Metro: "",
            barBackgroundColor: 'transparent',
            barBackgroundColorHide: 'rgba(0,0,0,0.5)',
            computeState: true,
        };
        this.keyboardDidHideListener = null;
    }
    static navigationOptions = {
        title: '投注列表',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 8
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {
        //监听键盘隐藏事件
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',
            this.keyboardDidHideHandler.bind(this));
    }

    componentWillUnmount() {
        //卸载键盘隐藏事件监听
        if (this.keyboardDidHideListener != null) {
            this.keyboardDidHideListener.remove();
        }
    }
    //键盘隐藏事件响应
    keyboardDidHideHandler(event) {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
            this.setState({
                beishuInput: parseInt(beishuInput).toString()
            })
        }
    }
    componentDidMount() {
        const { navigation } = this.props;
        let title = navigation.getParam("title");
        let betNumber = navigation.getParam("betNumber");
        this.getIsGold();
        this.setState({
            Title: title,
            betNumber: betNumber
        }, () => {
            this._createLists();
        })
    }
    getIsGold = () => {
        Httpc.get(REQUEST.GetUserInfo, { token: Ugame.info.Token }, (res) => {
            if (res.StatusCode == 1) {
                this.setState({
                    isGold: res.Data.isGold
                })
            }
        })
    }
    _createLists = () => {
        let betNumber = this.state.betNumber;
        let lists = {};
        for (let i in betNumber) {
            let { NoID, Number, TypeId, BetNo, str, odds } = betNumber[i];
            let curr_number = "Number_" + Number;

            if (lists.hasOwnProperty(curr_number)) {
                lists[curr_number].NoIDs.push(NoID);
                lists[curr_number].NoIDs.sort();
            } else {
                let dataSource = Football.gameListsData[Number]; 
                let temp = {
                    number: Number,
                    sort_num: dataSource.sort_num,
                    l_cn_abbr: dataSource.l_cn_abbr,
                    h_cn_abbr: dataSource.h_cn_abbr,
                    a_cn_abbr: dataSource.a_cn_abbr,
                    date_cn: dataSource.date_cn,
                    week: Utils.timestampToWeekday(dataSource.date_cn),
                    time_cn: dataSource.time_cn,
                    IsDan: 0,
                    NoIDs: [NoID],
                }
                lists[curr_number] = temp;
            }
        }
        let arrayLists = [];
        for (let key in lists) {
            arrayLists.push(lists[key]);
        }
        this.setState({
            name: [Football.Danguan[arrayLists.length]],
            lists: arrayLists,
        }, () => {
            this._update_bet_count();
            this._set_danguanLists();
            this._set_duoguanLists();
        })
    }
    //自由
    _set_danguanLists = () => {
        let temp = [];
        let lists = this.state.lists;
        let betNumber = this.state.betNumber;
        if (lists.length == 1) {
            let NoIDs = lists[0].NoIDs;
            for (let j = 0; j < NoIDs.length; j++) {
                if (betNumber[NoIDs[j]].dan == 1) {
                    temp.push(Football.Danguan[1]);
                    break;
                }
            }
        } else {
            //lists里NoIDs 全都都可以单，才可以 选单关
            let is_dan = true;
            for (let i = 0; i < lists.length; i++) {
                let NoIDs = lists[i].NoIDs;
                for (let j = 0; j < NoIDs.length; j++) {
                    if (betNumber[NoIDs[j]].dan == 0) {
                        is_dan = false;
                        break;
                    }
                }
            }
            for (let i = 0; i < lists.length; i++) {
                if (i == 0 && is_dan == false) {
                    continue;
                }
                temp.push(Football.Danguan[i + 1]);
            }
        }
        this.setState({
            danguanLists: temp
        })
    }
    //多关
    _set_duoguanLists = () => {
        this.setState({
            duoguanLists: Football.setDuoguanLists(this.state.lists.length)
        })
    }
    _on_change_is_need_pictures = () => {
        this.setState({
            is_need_pictures: !this.state.is_need_pictures
        })
    }
    _on_change_opt = () => {
        this.setState({
            opt_status: !this.state.opt_status
        })
    }
    _onbeishuInputChangeText = (beishuInput) => {
        this.setState({
            beishuInput: Utils.checkbeishuInput(beishuInput),
            computeState:true,
        }, () => {
            this._update_bet_count();
        })
    }
    _on_reduce_beishuInput = () => {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput <= 1) {
            return;
        }
        beishuInput = parseInt(beishuInput) - 1;
        this.setState({
            beishuInput: "" + beishuInput,
            computeState:true,
        }, () => {
            this._update_bet_count();
        })
    }
    _on_increase_beishuInput = () => {
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
        }
        beishuInput = parseInt(beishuInput) + 1;
        this.setState({
            beishuInput: "" + beishuInput,
            computeState:true,
        }, () => {
            this._update_bet_count();
        })
    }
    _render_ball_addr_item = (item, index, separators) => {
        let { select_boll_addr } = this.state;
        return (
            <TouchableOpacity onPress={() => this.change_ball_addr(item)}>
                <View style={select_boll_addr.indexOf(item) == -1 ? Styles.list_item : Styles.list_item_on} >
                    <Text style={{ textAlign: 'center' }}>{item}</Text>
                </View>
            </TouchableOpacity>
        );
    }
    _on_delect_item = (item, index) => {
        let { betNumber, lists } = this.state;
        let NoIDs = item.NoIDs;
        for (let i = 0; i < NoIDs.length; i++) {
            delete betNumber[NoIDs[i]];
        }
        let temp = [];
        for (let i = 0; i < lists.length; i++) {
            if (i == index) {
                continue;
            }
            temp.push(lists[i]);
        }
        this.setState({
            lists: temp,
            betNumber: betNumber,
            name: [],
            bet_count: 0,//数量
            bet_amount: 0,//投注金额
            bet_min_bonus: 0.00,//最少奖金
            bet_max_bonus: 0.00,//最大奖金
        }, () => {
            this._set_danguanLists();
            this._set_duoguanLists();
        });
    }
    _do_clear_dan = (func) => {
        let { betNumber, lists } = this.state;
        for (let i = 0; i < betNumber.length; i++) {
            betNumber[i].dan = false;
        }
        for (let i = 0; i < lists.length; i++) {
            lists[i].dan = false;
        }
        this.setState({
            betNumber: betNumber,
            lists: lists
        }, () => {
            func();
        });
    }
    _do_change_dan = (item) => {
        if (this.state.bet_type == 2) {
            return;
        }
        let name = this.state.name;
        let def_name = Football.Danguan[this.state.lists.length];
        if (name.indexOf(def_name) != -1) {
            return;
        }
        let { betNumber, lists } = this.state;
        //验证胆的数量，胆的最大个娄min[2,3,4]-1;
        let counts = [];
        for (let i = 0; i < name.length; i++) {
            let temp = name[i].split("/");
            counts.push(Number(temp[1].substr(0, 1)));
        }
        let maxCount = Math.min(...counts) - 1;
        if (maxCount <= 0) return;
        let dan_count = 0;
        for (let i = 0; i < lists.length; i++) {
            if (lists[i].IsDan == 1) {
                dan_count++;
            }
        }
        if (dan_count >= maxCount) {
            for (let key in betNumber) {
                if (betNumber[key].Number == item.number) {
                    if (betNumber[key].IsDan == 1) {
                        betNumber[key].IsDan = 0;
                    }
                }
            }
            for (let i = 0; i < lists.length; i++) {
                if (lists[i].number == item.number) {
                    if (lists[i].IsDan == 1) {
                        lists[i].IsDan = 0;
                    }
                }
            }
            this.setState({
                betNumber: betNumber,
                lists: lists,
                computeState:true
            }, () => {
                this._update_bet_count();
            });
            return;
        }
        //end
        for (let key in betNumber) {
            if (betNumber[key].Number == item.number) {
                betNumber[key].IsDan = betNumber[key].IsDan == 0 ? 1 : 0;
            }
        }
        for (let i = 0; i < lists.length; i++) {
            if (lists[i].number == item.number) {
                lists[i].IsDan = lists[i].IsDan == 0 ? 1 : 0;
            }
        }
        this.setState({
            betNumber: betNumber,
            lists: lists
        }, () => {
            this._update_bet_count();
        });

    }
    //胜平负未开售
    _weikaishou = () => {
        return (
            <View style={Styles.th}>
                <Text style={[Styles.td, { width: width - 216 }]}>未开售</Text>
            </View>
        );
    }
    _is_checked = (showtype, single, number, TypeId, BetNo) => {
        let css = [];
        if (showtype == 1) {
            single == 1 ? css.push(Styles.td1_dan) : css.push(Styles.td1);
            if (this._checkModelBetNumber(number, TypeId, BetNo)) {
                css.push(Styles.td1_on);
            }
        }
        return css;
    }
    _checkModelBetNumber = (Number, TypeId, BetNo) => {
        let modelSelectItem = this.state.modelSelectItem;
        let NoID = Number + '_' + TypeId + '_' + BetNo;
        if (modelSelectItem.hasOwnProperty(NoID)) {
            return true;
        }
        return false;
    }
    _td_item_model = (item, TypeId, BetNo, value) => {
        let { spf_title, rspf_title } = this.state;
        let str = TypeId == 1 ? spf_title[BetNo - 1] : rspf_title[BetNo - 1];
        let tips = str;
        let css = [];
        switch (TypeId) {
            case 1:
                css = this._is_checked(1, item.had_single, item.number, TypeId, BetNo);
                break;
            case 2:
                css = this._is_checked(1, item.hhad_single, item.number, TypeId, BetNo);
                break;
        }
        return (
            <TouchableOpacity onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value)}>
                <Text style={css}>{str}{Number(value).toFixed(2)}</Text>
            </TouchableOpacity>
        );
    }
    _render_spf_item = (item, TypeId) => {
        if (TypeId == 1) {
            var css = item.had_single == 1 ? Styles.th1_dan : Styles.th1;
            return (
                <View style={css}>
                    {this._td_item_model(item, 1, 1, item.a)}
                    {this._td_item_model(item, 1, 2, item.d)}
                    {this._td_item_model(item, 1, 3, item.h)}
                    {item.had_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../image/js_img_icon_sfdg.png')} /> : null}
                </View>
            );
        }
        if (TypeId == 2) {
            var css = item.hhad_single == 1 ? Styles.th1_dan : Styles.th1;
            return (
                <View style={css}>
                    {this._td_item_model(item, 2, 1, item.ha)}
                    {this._td_item_model(item, 2, 2, item.hd)}
                    {this._td_item_model(item, 2, 3, item.hh)}
                    {item.hhad_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../image/js_img_icon_sfdg.png')} /> : null}
                </View>
            );
        }
    }
    _get_item_dan = (item, TypeId) => {
        let dan = 0;
        switch (TypeId) {
            case 1:
                dan = item.had_single;
                break;
            case 2:
                dan = item.hhad_single;
                break;
            case 3:
                dan = item.crs_single;
                break;
            case 4:
                dan = item.ttg_single;
                break;
            case 5:
                dan = item.hafu_single;
                break;
        }
        return dan;
    }
    _on_mode_add_betNumber = (item, TypeId, BetNo, str, odds, dan) => {
        if (typeof (odds) == "undefined" || odds == "") {
            return;
        }
        if (!Utils.compareDate(item.end_time)) {
            this.do_toast('投注时间已截止', 500);
            return;
        }
        let NoID = item.number + '_' + TypeId + '_' + BetNo;
        let bet = {
            NoID: NoID,
            Number: item.number,
            IsDan: 0,
            TypeId: TypeId,
            BetNo: BetNo,
            str: str,
            odds: odds,
            dan: dan,
            week: Utils.timestampToWeekday(item.date_cn),
            a_cn_abbr: item.a_cn_abbr,
            h_cn_abbr: item.h_cn_abbr,
            sort_num: item.sort_num
        }
        let modelSelectItem = this.state.modelSelectItem;
        if (modelSelectItem.hasOwnProperty(NoID)) {
            delete modelSelectItem[NoID];
        } else {
            modelSelectItem[NoID] = bet;
        }
        this.setState({
            modelSelectItem: modelSelectItem,
        })
    }
    _render_crs_item = (item, TypeId, n, m) => {
        let crs_title = this.state.crs_title;
        let crs = item.crs.split(",");
        var itemArr = [];
        for (var i = n; i <= m; i++) {
            let BetNo = i;
            let str = crs_title[BetNo - 1];
            let tips = str;
            let value = crs[i - 1];
            let css = [];
            let text_css = {};
            if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td2_on);
                text_css = { color: '#ffffff' };
            } else {
                css.push(Styles.td2)
                text_css = { color: '#666666' };
            }
            if (BetNo == 13 || BetNo == 31) {
                css.push({ width: (width - 55) / 5 * 3 });
            }
            let dan = this._get_item_dan(item, TypeId);
            let key = item.number + "" + TypeId + "" + BetNo;
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value, dan)}>
                    <View style={css}>
                        <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                        <Text style={[text_css, { fontSize: 12 }]}>{!!value ? Number(value).toFixed(2) : null}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    _render_ttg_item = (item, TypeId, n, m) => {
        let ttg = item.ttg.split(",");
        let ttg_title = this.state.ttg_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = ttg_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [];
            let text_css = {};
            if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td3_on);
                text_css = { color: '#ffffff' };
            } else {
                css.push(Styles.td3)
                text_css = { color: '#666666' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;
            let dan = this._get_item_dan(item, TypeId);
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value,dan)}>
                    <View style={css}>
                        <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                        <Text style={[text_css, { fontSize: 12 }]}>{!!value ? Number(value).toFixed(2) : null}</Text>
                    </View>
                </TouchableOpacity>
            );

        }
        return itemArr;
    }
    _render_hafu_item = (item, TypeId, n, m) => {
        let ttg = item.ttg.split(",");
        let hafu_title = this.state.hafu_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = hafu_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [];
            let text_css = {};
            if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td1_on);
                text_css = { color: '#ffffff' };
            } else {
                css.push(Styles.td1)
                text_css = { color: '#666666' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;
            let dan = this._get_item_dan(item, TypeId);
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value,dan)}>
                    <View style={css}>
                        <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                        <Text style={[text_css, { fontSize: 12 }]}>{!!value ? Number(value).toFixed(2) : null}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    _getBetCount = (betNumber) => {
        let array = [];
        for (let key in betNumber) {
            if (array.indexOf(betNumber[key].Number) == -1) {
                array.push(betNumber[key].Number);
            }
        }
        return array.length;
    }
    submit_e_more_model = () => {
        this.setState({
            moreModalVisible: false,
            betNumber: this.state.modelSelectItem,
            bet_count: this._getBetCount(this.state.modelSelectItem),
            computeState:true,
        }, () => {
            this.setState({
                modelSelectItem: {}
            });
            this._createLists();
        });
    }
    _show_more_model = () => {
        let { moreData, crs_title, ttg_title, hafu_title } = this.state;
        if (moreData.length == 0) {
            return (
                <View></View>
            );
        }
        let crs = moreData.crs.split(",");
        let ttg = moreData.ttg.split(",");
        let hafu = moreData.hafu.split(",");
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.moreModalVisible}
                presentationStyle='overFullScreen'
                onRequestClose={() => {
                    this.hide_more_model()
                }}
            >
                <View style={Styles.more_model}>
                    <View style={Styles.more_model_content}>
                        <View style={Styles.more_model_header}>
                            <Text>{moreData.h_cn_abbr}</Text>
                            <Text>VS</Text>
                            <Text>{moreData.a_cn_abbr}</Text>
                        </View>
                        <ScrollView style={{ width: width - 32, height: height - 200 }}>
                            <View >
                                <Text style={{ textAlign: 'left', height: 30, lineHeight: 30, width: width - 32, color: '#333333' }}>胜平负/让球</Text>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={Styles.lefttable}>
                                        <Text style={Styles.td0}>0</Text>
                                        <Text style={Styles.td0}>-1</Text>
                                    </View>
                                    <View>
                                        {moreData.a == 0 ? this._weikaishou() : this._render_spf_item(moreData, 1)}
                                        {moreData.ha == 0 ? this._weikaishou() : this._render_spf_item(moreData, 2)}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>比分</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>主</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>胜</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 1, 13)}
                                    </View>
                                    <View style={[Styles.lefttable, { height: 40, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#32CD32' }}>平</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 14, 18)}
                                    </View>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#1E90FF' }}>主</Text>
                                        <Text style={{ fontSize: 12, color: '#1E90FF' }}>负</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 19, 31)}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>进球数</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 80, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>进</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>球</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>数</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_ttg_item(moreData, 4, 1, 8)}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>半全场</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>半</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>全</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>场</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_hafu_item(moreData, 5, 1, 9)}
                                    </View>
                                    <View style={{ width: width, height: 10 }}></View>
                                </View>
                            </View>
                        </ScrollView>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', width: width - 16, borderTopColor: '#e5e5e5', borderTopWidth: 0.5 }} >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.hide_more_model}>
                                <View style={[Styles.btn_item, { borderRightColor: '#ededed', borderRightWidth: 0.5, height: 40 }]}>
                                    <Text>取消</Text>
                                </View>
                            </TouchableOpacity >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.submit_e_more_model}>
                                <View style={[Styles.btn_item]}>
                                    <Text style={{ color: '#d0162e' }}>确定</Text>
                                </View>
                            </TouchableOpacity >
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
    _do_show_more_model = (Number) => {
        this.setState({
            moreModalVisible: true,
            moreData: Football.gameListsData[Number],
            modelSelectItem: Utils.deepCopy(this.state.betNumber)
        });
    }
    hide_more_model = () => {
        this.setState({
            moreModalVisible: false,
            modelSelectItem: {}
        });
    }
    renderListsitem = ({ item, index }) => {
        let { betNumber, lists, name } = this.state;
        let { NoIDs } = item;
        let betStr = [];
        for(let i=0;i<NoIDs.length;i++){
            betStr.push(betNumber[NoIDs[i]].str);
        }
        let danCss = Styles.dan_disabled;
        if (name.length > 0) {
            let counts = [];
            for (let i = 0; i < name.length; i++) {
                let temp = name[i].split("/");
                counts.push(Number(temp[1].substr(0, 1)));
            }
            if (Math.max(...counts) == lists.length || Math.min(...counts) <= 1) {
                danCss = Styles.dan_disabled;
            } else {
                danCss = Styles.dan;
            }
            if (item.IsDan == 1) {
                danCss = Styles.dan_on;
            }
        }
        return (
            <View style={Styles.item}>
                <View style={Styles.item_detailed}>
                    <TouchableOpacity onPress={() => { this._on_delect_item(item, index) }}>
                        <Image resizeMode="cover" source={require('../../image/js_img_ic_order_delete.png')} />
                    </TouchableOpacity>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', width: width - 132 }}>
                        <Text>{item.h_cn_abbr}</Text>
                        <Text>VS</Text>
                        <Text>{item.a_cn_abbr}</Text>
                    </View>
                    <View></View>
                </View>
                <View style={Styles.item_detailed}>
                    <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 100, paddingRight: 10,height:30}}>
                        <Text style={{ fontSize: 12, color: "#999999", height: 14 }}>{item.sort_num.slice(-3)}</Text>
                        <Text style={{ fontSize: 12, color: "#999999", height: 14 }}>{item.week}</Text>
                    </View>
                    <TouchableOpacity onPress={() => { this._do_show_more_model(item.number) }}>
                        <View style={Styles.item_show}>
                            <Text style={{ fontSize: 12, color: '#d0162e' }}>
                                {betStr.join(' ')}
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => { this._do_change_dan(item) }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 80 }}>
                            <Text style={danCss}>胆</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    _add_bet = () => {
        this.props.navigation.navigate('FootballGame');
    }
    _clear_bet = () => {
        DeviceEventEmitter.emit('updateclearbet', {});
        this.props.navigation.navigate('FootballGame');
    }
    do_bet_order = () => {

        let { name, IsFollow, Title, Commis, IsShow, Metro } = this.state;

        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
            this.setState({ beishuInput: '1' });
        }
        if (name.length == 0) {
            this.do_toast('请选择玩法', 500);
            return;
        }
        let postBetData = this._getPostBetData();
        //单笔金额不能超过20万元
        if (postBetData.betRecords.length * Number(beishuInput) > app.maxBetAmount) {
            this.do_toast('单笔金额不能超过20万元', 500);
            return;
        }
        //end
        postBetData.IsFollow = 0;
        postBetData.Title = Title;
        postBetData.Commis = Commis;
        postBetData.IsShow = IsShow;
        postBetData.Metro = Metro;
        this.props.navigation.navigate('BetOrder', {
            type: 1,
            postBetData: postBetData,
            beishuInput: beishuInput,
            game_model: "FootballGame",
            IsOptimize: 0
        })
    }
    do_bet_follow = () => {
        let { name, lists, betNumber, is_need_pictures, Title, IsFollow, Commis, IsShow, Metro, bet_min_bonus, bet_count } = this.state;
        if (name.length == 0) {
            this.do_toast('请选择玩法', 500);
            return;
        }
        //所有投注最低中奖金额  >= 投注金额的1.8。才能发布跟单
        if ((bet_min_bonus / bet_count) < 1.8) {
            this.do_toast('发布跟单赔率不可低于1.8', 500);
            return;
        }
        //end
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
            this.setState({ beishuInput: '1' });
        }
        let postBetData = this._getPostBetData();
        //单笔金额不能超过20万元
        if (postBetData.betRecords.length * Number(beishuInput) > app.maxBetAmount) {
            this.do_toast('单笔金额不能超过20万元', 500);
            return;
        }
        //end
        //胆
        let danlists = [];
        for (let i = 0; i < lists.length; i++) {
            if (lists[i].IsDan == 1) {
                danlists.push(lists[i].number);
            }
        }
        //end
        postBetData.IsFollow = 0;
        postBetData.Title = Title;
        postBetData.Commis = Commis;
        postBetData.IsShow = IsShow;
        postBetData.Metro = Metro;
        this.props.navigation.navigate('Follow', {
            game_model: "FootballGame",
            betNumber: betNumber,
            postBetData: postBetData,
            beishuInput: beishuInput,
            name: name,
            danlists: danlists,
        })
    }
    _compute_bet_count = () => {
        //胆
        let lists = this.state.lists;
        let danlists = [];
        for (let i = 0; i < lists.length; i++) {
            if (lists[i].IsDan == 1) {
                danlists.push(lists[i].number);
            }
        }
        //end
        let beishuInput = this.state.beishuInput;
        if (beishuInput == '' || beishuInput < 1) {
            beishuInput = 1;
        }
        return Football.betNumberComb(this.state.name, this.state.betNumber, beishuInput, danlists);
    }
    _do_chandg_bet_type = (bet_type, item) => {
        let name = this.state.name;
        if (bet_type != this.state.bet_type) {
            name = [];
        }
        let index = name.indexOf(item);
        if (bet_type == 1) {
            index == -1 ? name.push(item) : name.splice(index, 1);
        } else {
            index == -1 ? name[0] = item : name.splice(index, 1);
        }
        this.setState({
            bet_type: bet_type,
            name: name,
            computeState:true
        }, () => {
            let def_name = Football.Danguan[this.state.lists.length];
            if (name.indexOf(def_name) > -1) {
                this._do_clear_dan(() => {
                    this._update_bet_count();
                });
            } else {
                this._update_bet_count();
            }
        })
    }
    _update_bet_count = () => {
        if (this.state.name.length == 0) {
            this.setState({
                bet_count: 0,//数量
                bet_amount: 0,//投注金额
                bet_min_bonus: 0.00,//最少奖金
                bet_max_bonus: 0.00,//最大奖金
            });
            return;
        }
        let betRecords = this._compute_bet_count();
        let bet_count = betRecords.length;
        let bet_amount = betRecords.length * Football.PRICE * Number(this.state.beishuInput);
        let bet_min_bonus = 0;
        let bet_max_bonus = 0;
        for (let i = 0; i < betRecords.length; i++) {
            if (i == 0) {
                bet_min_bonus = Number(betRecords[i].bonus);
            } else {
                if(bet_min_bonus > Number(betRecords[i].bonus)){
                    bet_min_bonus = Number(betRecords[i].bonus);
                }
            }
            bet_max_bonus += Number(betRecords[i].bonus);
        }
        this.setState({
            bet_count: bet_count,//数量
            bet_amount: bet_amount,//投注金额
            bet_min_bonus: Number(bet_min_bonus).toFixed(2),//最少奖金
            bet_max_bonus: Number(bet_max_bonus).toFixed(2),//最大奖金
            computeState:false,
        });
    }
    _render_danguan_type_item = ({ item, index, separators }) => {
        let items = item.split("/");
        let css = Styles.chuan_type;
        let name = this.state.name;
        if (this.state.bet_type == 1) {
            if (name.indexOf(item) != -1) {
                css = Styles.chuan_type_on;
            }
        }
        return (
            <TouchableOpacity onPress={() => { this._do_chandg_bet_type(1, item) }}>
                <Text style={css}>{items[0]}</Text>
            </TouchableOpacity>
        );
    }
    _render_duoguan_type_item = ({ item, index, separators }) => {
        let items = item.split("/");
        let css = Styles.chuan_type;
        let name = this.state.name;
        if (this.state.bet_type == 2) {
            if (name.indexOf(item) != -1) {
                css = Styles.chuan_type_on;
            }
        }
        return (
            <TouchableOpacity onPress={() => { this._do_chandg_bet_type(2, item) }}>
                <Text style={css}>{items[0]}</Text>
            </TouchableOpacity>
        );
    }
    do_toast = (str, time) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    _render_name = () => {
        let { name, opt_status } = this.state;
        let names = [];
        for (let i = 0; i < name.length; i++) {
            names.push(name[i].split("/")[0]);
        }
        let text = names.join(',');
        if (opt_status) {
            text = '收起';
        } else {
            if (name.length == 0) {
                text = '请选择';
            }
        }
        return (
            <View>
                <Text style={Styles.name_tips}>{text}</Text>
            </View>
        );
    }
    //奖金优化
    _do_bet_bonus_opt = () => {
        let { bet_type, name, betNumber, lists, bet_count } = this.state;
        if (name.length == 0) {
            this.do_toast('请选择玩法', 1000);
            return;
        }
        if (bet_type == 2) {
            this.do_toast('此玩法不支持奖金优化', 1000);
            return;
        }
        if (bet_count <= 1) {
            this.do_toast('单注不支持奖金优化', 1000);
            return;
        }
        let has_dan = false;
        for (let key in betNumber) {
            if (betNumber[key].IsDan == 1) {
                has_dan = true;
                break;
            }
        }
        if (has_dan) {
            this.do_toast('设胆后不支持奖金优化', 1000);
            return;
        }
        let postBetData = this._getjjyhBetData();

        this.props.navigation.navigate('FootballBonusOpt', {
            postBetData: postBetData,
        })
    }
    _getjjyhBetData = () => {
        let nameArray = [];
        let name = this.state.name;
        for (let i = 0; i < name.length; i++) {
            nameArray.push(name[i].split("/")[0]);
        }
        var postBetData = {
            title: this.state.Title,
            name: nameArray.join(","),
            isPhoto: this.state.is_need_pictures ? 1 : 0,
            betNumber: this.state.betNumber,
            betRecords: Football.betNumberCombB(this.state.name, this.state.betNumber, this.state.beishuInput),
            bet_amount: this.state.bet_amount
        }
        return postBetData;
    }
    _getPostBetData = () => {
        let nameArray = [];
        let name = this.state.name;
        for (let i = 0; i < name.length; i++) {
            nameArray.push(name[i].split("/")[0]);
        }
        let betNumber = [];
        for (let key in this.state.betNumber) {
            let item = this.state.betNumber[key];
            item.NoID = item.NoID.replace(/_/g, '');
            betNumber.push(item);
        }
        var postBetData = {
            name: nameArray.join(","),
            isPhoto: this.state.is_need_pictures ? 1 : 0,
            betNumber: betNumber,
            betRecords: this._compute_bet_count()
        }
        return postBetData;
    }
    render() {
        let { moreModalVisible, barBackgroundColorHide, barBackgroundColor, is_need_pictures, opt_status, beishuInput, lists, name, danguanLists, duoguanLists, bet_count, bet_amount, bet_min_bonus, bet_max_bonus, isGold, computeState } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor={moreModalVisible ? barBackgroundColorHide : barBackgroundColor} />
                <View style={Styles.header}>
                    <TouchableOpacity onPress={() => { this._add_bet() }}>
                        <View style={Styles.header_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>+</Text>
                            <Text style={{ color: '#666666', fontSize: 12 }}>添加赛事</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{ width: 1, height: 40, backgroundColor: '#e5e5e5' }}></View>
                    <TouchableOpacity onPress={() => { this._clear_bet() }}>
                        <View style={Styles.header_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>清空重选</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <ScrollView style={{ height: 400 }}>
                    <View style={Styles.lists}>
                        <FlatList
                            data={lists}
                            extraData={this.state.lists}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this.renderListsitem}
                        />
                    </View>
                    <TouchableOpacity onPress={() => this._on_change_is_need_pictures()}>
                        <View style={Styles.tips_info}>
                            {is_need_pictures ? <Image resizeMode="cover" source={require('../../image/js_img_ic_login_checkbox_checked.png')} /> : <Image resizeMode="cover" source={require('../../image/js_img_ic_login_checkbox.png')} />}
                            <Text style={{ fontSize: 12, marginLeft: 5 }}>要求店主上传照片</Text>
                        </View>
                    </TouchableOpacity>
                </ScrollView>
                <View style={[Styles.opt, opt_status ? Styles.show_opt : Styles.hide_opt]}>
                    <View style={Styles.bet_type}>
                        <TouchableOpacity onPress={() => this._on_change_opt()}>
                            <View style={{
                                flexDirection: 'row',
                                justifyContent: 'center',
                                alignItems: 'center', width: 110, overflow: 'hidden'
                            }}>
                                {this._render_name()}
                                <Image resizeMode="cover" source={require('../../image/js_img_btn_pulldown.png')} />
                            </View>
                        </TouchableOpacity>
                        <View style={Styles.beishu}>
                            <Text style={{ fontSize: 12, color: '#999999' }}>倍</Text>
                            <View style={Styles.beishu_input}>
                                <TouchableOpacity onPress={() => this._on_reduce_beishuInput()}>
                                    <View style={{ padding: 5 }}>
                                        <Image resizeMode="cover" source={require('../../image/js_img_icon_subtract.png')} />
                                    </View>
                                </TouchableOpacity>
                                <TextInput
                                    style={{ height: 25, padding: 0, lineHeight: 25, textAlign: 'center', width: 30, borderLeftWidth: 1, borderRightWidth: 1, borderColor: '#cacaca' }}
                                    value={beishuInput}
                                    keyboardType='numeric'
                                    placeholder={"1"}
                                    onChangeText={(beishuInput) => this._onbeishuInputChangeText(beishuInput)}
                                />
                                <TouchableOpacity onPress={() => this._on_increase_beishuInput()}>
                                    <View style={{ padding: 5 }}>
                                        <Image resizeMode="cover" source={require('../../image/js_img_sub_icon_add.png')} />
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <Text style={{ fontSize: 12, color: '#999999' }}>数</Text>
                        </View >
                        <TouchableOpacity onPress={() => this._do_bet_bonus_opt()}>
                            <View style={{
                                width: 110, flexDirection: 'row',
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <Text style={{ fontSize: 12, color: '#999999' }}>奖金优化 ></Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <ScrollView style={{ height: 80 }}>
                        <View style={Styles.type_lists}>
                            <View style={Styles.type_lists_item}>
                                <View style={Styles.chuan_type_title}>
                                    <Text style={{ fontSize: 12, color: '#333333' }}>自由过关</Text>
                                </View>
                                <View style={Styles.chuan_type_lists}>
                                    <FlatList
                                        data={danguanLists}
                                        extraData={this.state}
                                        keyExtractor={(item, index) => index.toString()}
                                        horizontal={false}
                                        numColumns={4}
                                        renderItem={this._render_danguan_type_item}
                                    />
                                </View>
                            </View>
                            <View style={{ backgroundColor: '#f7f7f7', height: 1, width: width, marginTop: 10 }}></View>
                            <View style={Styles.type_lists_item}>
                                <View style={Styles.chuan_type_title}>
                                    <Text style={{ fontSize: 12, color: '#333333' }}>多串过关</Text>
                                </View>
                                <View style={Styles.chuan_type_lists}>
                                    <FlatList
                                        data={duoguanLists}
                                        extraData={this.state}
                                        keyExtractor={(item, index) => index.toString()}
                                        horizontal={false}
                                        numColumns={4}
                                        renderItem={this._render_duoguan_type_item}
                                    />
                                </View>
                            </View>
                        </View>
                    </ScrollView>
                </View>
                <View style={Styles.yujijinge}>
                    <View style={Styles.yujijinge_sum}>
                        <Text style={{ fontSize: 12 }}>{bet_count}</Text>
                        <Text style={{ fontSize: 12 }}>注</Text>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>{bet_amount}</Text>
                        <Text style={{ fontSize: 12 }}>元</Text>
                        <Text style={{ fontSize: 12 }}>预计奖金:</Text>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>{bet_min_bonus}</Text>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>~</Text>
                        <Text style={{ fontSize: 12, color: '#d0162e' }}>{bet_max_bonus}</Text>
                        <Text style={{ fontSize: 12 }}>元</Text>
                    </View>
                    <Text style={Styles.yujijinge_tips}>预计奖金参考，请以实票为准</Text>
                </View>
                <View style={Styles.bottom}>
                    {isGold == 1 ?
                        <TouchableOpacity onPress={() => this.do_bet_follow()}>
                            <View style={{
                                flexDirection: 'row',
                                justifyContent: 'center',
                                alignItems: 'center', width: width / 2
                            }}>
                                <Image resizeMode="cover" source={require('../../image/js_img_icon_edit_hm.png')} />
                                <Text style={{ color: '#d0162e', marginLeft: 5 }}>发起跟单</Text>
                            </View>
                        </TouchableOpacity> :
                        null
                    }

                    {computeState==true?
                        <View style={[Styles.tuzhu_hui, isGold == 1 ? { width: width / 2 } : { width: width }]}>
                            <Text style={{ color: '#ffffff' }}>确认投注</Text>
                        </View> :
                        <TouchableOpacity onPress={() => this.do_bet_order()}>
                            <View style={[Styles.tuzhu, isGold == 1 ? { width: width / 2 } : { width: width }]}>
                                <Text style={{ color: '#ffffff' }}>确认投注</Text>
                            </View>
                        </TouchableOpacity>
                    }
                </View>
                {this._show_more_model()}
                {this.toast()}
            </View>
        )
    }



}
